<template>
    <div>
        <el-container>
            <el-aside :width="isCollapse?'74px':'200px'">
                     <el-menu
                        :collapse-transition="false"
                        :collapse="isCollapse"
                        :default-active="currentActive"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        :router="true"
                        >
                        <el-menu-item index="/main">
                            <i class="el-icon-location"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-menu-item index="/articleList">
                            <i class="el-icon-document"></i>
                            <span slot="title">文章管理</span>
                        </el-menu-item>
                        <el-menu-item index="/image" >
                            <i class="el-icon-picture"></i>
                            <span slot="title">素材管理</span>
                        </el-menu-item>
                        <el-menu-item index="/addArticle">
                            <i class="el-icon-s-promotion"></i>
                            <span slot="title">发布文章</span>
                        </el-menu-item>
                        <el-menu-item index="/comment">
                            <i class="el-icon-chat-dot-round"></i>
                            <span slot="title">评论管理</span>
                        </el-menu-item>
                        <el-menu-item index="/fans">
                            <i class="el-icon-user"></i>
                            <span slot="title">粉丝管理</span>
                        </el-menu-item>
                        <el-menu-item index="/setting">
                            <i class="el-icon-setting"></i>
                            <span slot="title">个人设置</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
            
            <el-container>
                <el-header>
                    <i class="header-icon" @click="isCollapse=!isCollapse" :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
                    <span class="header-title">黑马头条号</span>
                    <el-dropdown class="home-dropdown">
                        <span class="el-dropdown-link">
                            <img class="header-img" :src="user.photo">
                            {{user.name}}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="goSetting">个人设置</el-dropdown-item>
                            <el-dropdown-item @click.native="handleClickOut">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-header>
                <el-main>
                    <!--二级路由组件显示区域-->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import {api_profile} from '@/api/user.js'
import { delUserToken } from '@/store/index'
export default {
    data(){
        return {
            isCollapse:false,
            user:{
                name:'',
                photo:'',
            },
            currentActive:window.location.hash.slice(1)
        }
    },
    methods:{
        goSetting(){
            this.$router.push({
                path:'/setting'
            })
        },
        handleClickOut(){
            this.$confirm('这就走啦?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delUserToken()
                this.$router.push({
                    path:'/login'
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });


           
            
        }
    },
    watch:{
        $route:function(newRoute){
            console.log("####",newRoute,this.currentActive)
            this.currentActive = newRoute.path
        }
    },
    mounted(){
        api_profile().then((res)=>{
            console.log(res)
            if(res){
                this.user = res.data.data
            }
        })
        //声明一下
        this.eventBus.$on('set-photo',(payload)=>{
            //执行修改的逻辑
            //payload代表数据更新之后发送过来的数据
            console.log("payload代表数据更新之后发送过来的数据",payload)
            this.user.photo=payload

        })
    }
}
</script>
<style scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
   
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
 
  
  .home-dropdown{
        float:right;
  }
  .header-title{
        color: #333;
        font-size: 40px;
  }
  .header-icon{
        float: left;
        margin-top: 20px;
        font-size: 24px;
  }
  .header-img{
      width: 30px;
      height: 30px;
  }
</style>